import React from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Collapse, Space, Table, Tag, Switch, Typography } from 'antd';

const { Title } = Typography;
const { Panel } = Collapse;

// 假数据：每个设备包含多个算法
const deviceAlgorithmData = [
  {
    deviceId: 'DEV20250001',
    deviceName: '巡检机器人-A',
    online: true,
    algorithms: [
      { id: 1, name: '摔倒识别模型v1', type: 'fall', enabled: true },
      { id: 2, name: '人脸检测算法', type: 'face', enabled: true },
    ],
  },
  {
    deviceId: 'DEV20250002',
    deviceName: '摄像头-B',
    online: false,
    algorithms: [
      { id: 3, name: '垃圾识别', type: 'garbage', enabled: false },
      { id: 4, name: '安全帽检测', type: 'helmet', enabled: true },
      { id: 5, name: '烟雾检测', type: 'smoke', enabled: false },
    ],
  },
  {
    deviceId: 'DEV20250003',
    deviceName: '黑豹',
    online: false,
    algorithms: [
      { id: 1, name: '摔倒识别模型v1', type: 'fall', enabled: true },
      { id: 2, name: '人脸检测算法', type: 'face', enabled: true },
      { id: 3, name: '垃圾识别', type: 'garbage', enabled: false },
      { id: 4, name: '安全帽检测', type: 'helmet', enabled: true },
      { id: 5, name: '烟雾检测', type: 'smoke', enabled: false },
    ],
  },
  
  {
    deviceId: 'DEV20250004',
    deviceName: 'Go-2摄像头',
    online: true,
    algorithms: [
      { id: 1, name: '摔倒识别模型v1', type: 'fall', enabled: true },
      { id: 2, name: '人脸检测算法', type: 'face', enabled: true },
      { id: 3, name: '垃圾识别', type: 'garbage', enabled: false },
      { id: 4, name: '安全帽检测', type: 'helmet', enabled: true },
      { id: 5, name: '烟雾检测', type: 'smoke', enabled: false },
    ],
  },
  
  {
    deviceId: 'DEV20250005',
    deviceName: 'Go-1摄像头',
    online: false,
    algorithms: [
      { id: 1, name: '摔倒识别模型v1', type: 'fall', enabled: true },
      { id: 2, name: '人脸检测算法', type: 'face', enabled: true },
      { id: 3, name: '垃圾识别', type: 'garbage', enabled: false },
      { id: 4, name: '安全帽检测', type: 'helmet', enabled: true },
      { id: 5, name: '烟雾检测', type: 'smoke', enabled: false },
    ],
  },  
  {
    deviceId: 'DEV20250006',
    deviceName: '阿波罗摄像头',
    online: true,
    algorithms: [
      { id: 1, name: '摔倒识别模型v1', type: 'fall', enabled: true },
      { id: 2, name: '人脸检测算法', type: 'face', enabled: true },
      { id: 3, name: '垃圾识别', type: 'garbage', enabled: false },
      { id: 4, name: '安全帽检测', type: 'helmet', enabled: true },
      { id: 5, name: '烟雾检测', type: 'smoke', enabled: false },
    ],
  },
];


const algorithmTypeMap: Record<string, string> = {
  fall: '摔倒检测',
  face: '人脸检测',
  garbage: '垃圾检测',
  helmet: '安全帽检测',
  smoke: '烟雾检测',
  stranger: '陌生人检测',
};

const DeviceAlgorithmConfig: React.FC = () => {
  const renderAlgorithmTable = (algorithms: any[]) => (
    <Table
      columns={[
        { title: '算法 ID', dataIndex: 'id', key: 'id', width: 80 },
        { title: '算法名称', dataIndex: 'name', key: 'name' },
        {
          title: '算法类型',
          dataIndex: 'type',
          key: 'type',
          render: (type: string) => <Tag color="blue">{algorithmTypeMap[type]}</Tag>,
        },
        {
          title: '启用状态',
          dataIndex: 'enabled',
          key: 'enabled',
          render: (enabled: boolean, record) => (
            <Switch
              checked={enabled}
              checkedChildren="启用"
              unCheckedChildren="禁用"
              onChange={(checked) => {
                console.log(`算法 ${record.name} 设置为：${checked ? '启用' : '禁用'}`);
              }}
            />
          ),
        },
        {
          title: '操作',
          key: 'action',
          render: (_, record) => (
            <Space>
              <a>编辑</a>
              <a style={{ color: 'red' }}>删除</a>
            </Space>
          ),
        },
      ]}
      dataSource={algorithms}
      rowKey="id"
      pagination={false}
      size="small"
    />
  );

  return (
    <PageContainer>
      {/* <Title level={3}>算法部署与配置</Title> */}
      <Collapse accordion>
        {deviceAlgorithmData.map((device) => (
          <Panel
            key={device.deviceId}
            header={
              <Space>
                <strong>{device.deviceName}</strong>
                <Tag color={device.online ? 'green' : 'red'}>
                  {device.online ? '在线' : '离线'}
                </Tag>
              </Space>
            }
          >
            {renderAlgorithmTable(device.algorithms)}
          </Panel>
        ))}
      </Collapse>
    </PageContainer>
  );
};

export default DeviceAlgorithmConfig;
